<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Brushed - Responsive One Page Template Documentation</title>
<meta name="description" content="Brushed - Responsive One Page Template Documentation">
<meta name="author" content="Alessio Atzeni">
<meta name="robots" content="NOINDEX, NOFOLLOW">


<link rel="stylesheet" href="res/css/style.css">
<link rel="stylesheet" href="res/css/jquery.mCustomScrollbar.css">

<!-- Google Font -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic' rel='stylesheet' type='text/css'>

<!-- Syntax Highlighter -->
<link rel="stylesheet" type="text/css" href="res/js/syntax-highlighter/styles/shCore.css" media="all">
<link rel="stylesheet" type="text/css" href="res/js/syntax-highlighter/styles/shThemeDefault.css" media="all">
        
<script src="res/js/modernizr.js"></script>

</head>

<body>

<div id="navmenu-primary" class="">
	<div class="navmenu-primary-content grid-full clearfix">
    	<div class="navmenu-left left clearfix">
            	<div id="nav_item_logo" class="nav-item nav-item-logo clearfix first">
                	<a class="nav-item-logo-link nav-sprite nav-sprite-logo" href="http://www.alessioatzeni.com" target="_blank">
                        <div class="nav-text">alessioatzeni.com</div>
                    </a>
                </div>
        </div>
        <div class="navmenu-right right clearfix">
        	<ul class="left nav-large nav-items clearfix">
                <li id="nav-item-question" class="nav-item nav-item-question clearfix">
                	<span class="nav-link"><a href="http://themeforest.net/user/Bluxart" class="nav-btn-question" target="_blank">Contact the Support</a></span>
                </li>
            </ul>
        </div>
    </div>
</div>

<div id="site-container">
	<div id="site-columns" class="clearfix">
    	<div id="site-left-column">
        	<div id="primary-content" class="clearfix">
            	<div id="activity-home" class="normal">
                	<div id="left-panel" class="left panel">

                    	<div id="left-panel-content" class="panel-content be-viewport">
                        	<nav id="menu">
                            	<ul>
                                	<li class="menu-label no-border">
                                		<a href="#welcome" class="section-menu-title left">Welcome</a>
                                    </li>
                                    <li class="menu-label no-border">
                                		<a href="#installing-theme" class="section-menu-title left">Installing Template</a>
                                    </li>
                                    <li class="menu-label no-border">
                                		<a href="#html-structure" class="section-menu-title left">HTML Structure</a>
                                	</li>
                                    <li class="menu-label no-border">
                                		<a href="#css-structure" class="section-menu-title left">HEAD/CSS Structure</a>
                                    </li>
									<li class="menu-label no-border">
                                		<a href="#js-structure" class="section-menu-title left">Javascript Settings</a>
                                    </li>
									<li class="menu-label no-border">
                                		<a href="#slider-settings" class="section-menu-title left">Slider Settings</a>
                                    </li>
                                    <li class="menu-label no-border">
                                		<a href="#portfolio-settings" class="section-menu-title left">Portfolio Settings</a>
                                    </li>
                                    <li class="menu-label no-border">
                                		<a href="#contact-form" class="section-menu-title left">Contact Form</a>
                                    </li>
									<li class="menu-label no-border">
                                		<a href="#shortcodes" class="section-menu-title left">Shortcode System</a>
                                    </li>
                                    <li class="menu-label no-border">
                                		<a href="#scripts" class="section-menu-title left">Scripts</a>
                                	</li>
                                    <li class="menu-label no-border">
                                		<a href="#final-words" class="section-menu-title left">Final Words</a>
                                	</li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    
                    
                    
                    <div id="right-panel" class="left panel">
                        <div id="right-panel-content" class="panel-content fix-panel">
                        	<div class="box-master">
                            	<div class="box-list-posts">
                                	<!-- Start Section -->
                        			<div id="welcome" class="box-post">
                                    	<!-- Top Content -->
                            			<div class="box-post-content">
                                            <div class="box-post-header">
                                            	<h3 class="c-name">Brushed - Responsive One Page Template</h3>
                                                <h4 class="credits">By Alessio Atzeni - <a href="http://www.alessioatzeni.com" target="_blank">www.alessioatzeni.com</a></h4>
                                            </div>
                                            <div class="box-post-container">
                                            	<h3 class="c-title">Welcome To Brushed Template Documentation.</h3>
                                                <div class="c-text">
													<p>Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!</p>
                                                    <p class="last">This document covers the installation and use of this theme and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated <a href="http://themeforest.net/user/Bluxart" target="_blank">support section</a>.</p>
                                                </div>
                                            </div>
                                            
                                            <div class="box-post-container">
                                            	<h3 class="c-title">Template Features</h3>
                                                <div class="c-text">
													<ul>
                                                    	<li>Elegant &amp; Minimal Flat Design</li>
                                                    	<li>HTML5 & CSS3</li>
                                                        <li>Fully Responsive Design</li>
                                                        <li>Retina Display Ready</li>
                                                        <li>Filterable Portfolio</li>
                                                        <li>Ajax/PHP Contact Form</li>
                                                        <li>Twitter Widget</li>
                                                        <li>Shortcodes (Columns, Buttons, Toggles, Tabs, Alert & much more...)</li>
                                                        <li>200+ Custom Icons and Font Icons (Character Map Included)</li>
                                                        <li>All files are well commented</li>
                                                        <li>Crossbrowser Compatible with IE9+, Firefox, Safari, Opera, Chrome</li>
                                                        <li>Layered PSDs for Customisation</li>
                                                        <li>Extensive Documentation</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                            		</div>
                                    
                                    <div id="installing-theme" class="box-post">
                                    	<!-- Top Content -->
                            			<div class="box-post-content">
                                            <div class="box-post-header">
                                            	<h3 class="c-name">Brushed - Responsive One Page Template</h3>
                                                <h4 class="credits">By Alessio Atzeni - <a href="http://www.alessioatzeni.com" target="_blank">www.alessioatzeni.com</a></h4>
                                            </div>
                                            <div class="box-post-container">
                                            	<h3 class="c-title">Installing Template.</h3>
                                                <div class="c-text">
													<p>After unzip the download pack, you'll found a <strong>Template Folder</strong> with all the files.</p>
                                                    <p>You can view this Template in any browser, you can display or edit the Template without an internet connection.</p>
													<p>The only section that will not work is the <strong>Contact Section</strong> which contains PHP code and requires a server enviroment for send messages, and <strong>FancyBox Video</strong> not loaded in local enviroment.</p>
                                                    <p>Now open your FTP Client (like Filezilla) and upload the content of the Template on your server root.</p>
                                                    <p>Once the files are done uploading go to www.yourdomainname.com/index.html</p>
                                                </div>
                                            </div>
                                        </div>
                            		</div>
                                    
                                    
                                    <div id="html-structure" class="box-post">
                                    	<!-- Top Content -->
                            			<div class="box-post-content">
                                            <div class="box-post-header">
                                            	<h3 class="c-name">Brushed - Responsive One Page Template</h3>
                                                <h4 class="credits">By Alessio Atzeni - <a href="http://www.alessioatzeni.com" target="_blank">www.alessioatzeni.com</a></h4>
                                            </div>
                                            <div class="box-post-container">
                                            	<h3 class="c-title">HTML Structure</h3>
                                                <div class="c-text">
                                                	<p>This Template has a Responsive layout and is based on the <strong>Bootstrap Framework</strong>.
                                                    For more information about this visit <a href="http://twitter.github.io/bootstrap/scaffolding.html" target="_blank">Bootstrap Scaffolding</a>.</p>
                                                    
                                                    <p>The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. 
                                                    With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.</p>
                                                    
                                                    <h3 class="c-title">Basic Grid HTML</h3>
                                                    <p>For a simple two column layout, create a <strong>.row</strong> and add the appropriate number of <strong>.span*</strong> columns. As this is a 12-column grid, each <strong>.span*</strong> spans a 
                                                    number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
                                                    
                                                    <p>Given this example, we have <strong>.span4</strong> and <strong>.span8</strong>, making for 12 total columns and a complete row.</p>
                                                    
												    <pre class="brush: html; syntaxhighlighter">
                                                            <div class="row">
                                                                <div class="span4">...</div>
                                                                <div class="span8">...</div>
                                                            </div>
                                                    </pre>
                                                    
                                                    <h3 class="c-title">Nesting Columns</h3>
                                                    <p>To nest your content with the default grid, add a new .row and set of <strong>.span*</strong> columns within an existing <strong>.span*</strong> column. 
                                                    Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
                                                    
                                                    <pre class="brush: html; syntaxhighlighter">
                                                            <div class="row">
                                                                <div class="span9">
                                                                    Level 1 column
                                                                    <div class="row">
                                                                        <div class="span6">Level 2</div>
                                                                        <div class="span3">Level 2</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                    </pre>
                                                    
                                                </div>
                                            </div>
                                        </div>
                            		</div>
                                    
                                    
                                    <div id="css-structure" class="box-post">
                                    	<!-- Top Content -->
                            			<div class="box-post-content">
                                            <div class="box-post-header">
                                            	<h3 class="c-name">Brushed - Responsive One Page Template</h3>
                                                <h4 class="credits">By Alessio Atzeni - <a href="http://www.alessioatzeni.com" target="_blank">www.alessioatzeni.com</a></h4>
                                            </div>
                                            <div class="box-post-container">
                                            	<h3 class="c-title">HEAD/CSS Structure</h3>
                                                <div class="c-text">
													<p>These are the css files that are loaded into templates in <strong>Head Section</strong>.</p>
                                                    <pre class="brush: html; syntaxhighlighter">

                                                    <!-- Bootstrap -->
                                                    <link href="_include/css/bootstrap.min.css" rel="stylesheet">
                                                    
                                                    <!-- Main Style -->
                                                    <link href="_include/css/main.css" rel="stylesheet">
                                                    
                                                    <!-- Supersized -->
                                                    <link href="_include/css/supersized.css" rel="stylesheet">
                                                    <link href="_include/css/supersized.shutter.css" rel="stylesheet">
                                                    
                                                    <!-- FancyBox -->
                                                    <link href="_include/css/fancybox/jquery.fancybox.css" rel="stylesheet">
                                                    
                                                    <!-- Font Icons -->
                                                    <link href="_include/css/fonts.css" rel="stylesheet">
                                                    
                                                    <!-- Shortcodes -->
                                                    <link href="_include/css/shortcodes.css" rel="stylesheet">
                                                    
                                                    <!-- Responsive -->
                                                    <link href="_include/css/bootstrap-responsive.min.css" rel="stylesheet">
                                                    <link href="_include/css/responsive.css" rel="stylesheet">
                                                    
                                                    <!-- Supersized -->
                                                    <link href="_include/css/supersized.css" rel="stylesheet">
                                                    <link href="_include/css/supersized.shutter.css" rel="stylesheet">
                                                     
                                                    </pre>
                                                    
                                                    <h3 class="c-title">Google Web Fonts</h3>
                                                    <p>By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.</p>
                                                    <pre class="brush: html; syntaxhighlighter">

                                                    <!-- Head Section / index.html / Line 51 -->
                                                    
                                                    <!-- Google Font -->
													<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900' rel='stylesheet' type='text/css'>
                                                    
                                                    </pre>
                                                    
                                                    <p>Remember to change the font into <strong>style.css</strong></p>
                                                     
                                                    <pre class="brush: css; syntaxhighlighter">
                                                    /* style.css / Line 26 */
                                                    
                                                    body{
                                                        background:#2F3238;
                                                        color:#7F8289;
                                                        font-weight:300;
                                                        font-size:16px;
                                                        font-family: 'Titillium Web', sans-serif;
                                                        line-height:28px;
                                                    }

                                                    </pre>
                                                    
                                                    <h3 class="c-title">Google Analytics</h3>
                                                    <p>You can place your analytics code to check your stats or replace the following code with your code to check the statistics.</p>
                                                    
                                                    <pre class="brush: html; syntaxhighlighter">
                                                    
													<!-- Head Section / index.html / Line 65 -->
                                                    <!-- Analytics -->
													&lt;script type="text/javascript"&gt;
                                                    
                                                      var _gaq = _gaq || [];
                                                      _gaq.push(['_setAccount', 'Insert Your Code']);
                                                      _gaq.push(['_trackPageview']);
                                                    
                                                      (function() {
                                                        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                                                        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                                                        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
                                                      })();
                                                    
                                                    &lt;/script&gt;
                                                    <!-- End Analytics -->
                                                    
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                            		</div>
                                    
                                    
                                    <div id="js-structure" class="box-post">
                                    	<!-- Top Content -->
                            			<div class="box-post-content">
                                            <div class="box-post-header">
                                            	<h3 class="c-name">Brushed - Responsive One Page Template</h3>
                                                <h4 class="credits">By Alessio Atzeni - <a href="http://www.alessioatzeni.com" target="_blank">www.alessioatzeni.com</a></h4>
                                            </div>
                                            <div class="box-post-container">
                                            	<h3 class="c-title">JS Structure</h3>
                                                <div class="c-text">
                                                    <p>These are the JS files that are loaded into templates in end of the <strong>Body Section</strong>.</p>
													<p>Only <strong>Modernizr.js</strong> is loaded in <strong>Head Section</strong>.</p>
                                                    
                                                    <pre class="brush: html; syntaxhighlighter">
                                                        <!-- Js -->
														&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; <!-- jQuery Core -->
                                                        &lt;script src="_include/js/bootstrap.min.js"&gt;&lt;/script&gt; <!-- Bootstrap -->
                                                        &lt;script src="_include/js/supersized.3.2.7.min.js"&gt;&lt;/script&gt; <!-- Slider -->
                                                        &lt;script src="_include/js/waypoints.js"&gt;&lt;/script&gt; <!-- WayPoints -->
                                                        &lt;script src="_include/js/waypoints-sticky.js"&gt;&lt;/script&gt; <!-- Waypoints for Header -->
                                                        &lt;script src="_include/js/jquery.isotope.js"&gt;&lt;/script&gt; <!-- Isotope Filter -->
                                                        &lt;script src="_include/js/jquery.fancybox.pack.js"&gt;&lt;/script&gt; <!-- Fancybox -->
                                                        &lt;script src="_include/js/jquery.fancybox-media.js"&gt;&lt;/script&gt; <!-- Fancybox for Media -->
                                                        &lt;script src="_include/js/jquery.tweet.js"&gt;&lt;/script&gt; <!-- Tweet -->
                                                        &lt;script src="_include/js/plugins.js"&gt;&lt;/script&gt; <!-- Contains: jPreloader, jQuery Easing, jQuery ScrollTo, jQuery One Page Navi -->
                                                        &lt;script src="_include/js/main.js"&gt;&lt;/script&gt; <!-- Default JS -->
                                                        <!-- End Js -->
                                                    </pre>
                                                   
													<p>This is the complete code for <strong>main.js</strong>, is responsible for all events in the Template.
													You can edit the following file according to your requirements.</p> 
                                                    
                                                    <pre class="brush: html; syntaxhighlighter">
jQuery(function($){

var BRUSHED = window.BRUSHED || {};

/* ==================================================
   Mobile Navigation
================================================== */
/* Clone Menu for use later */
var mobileMenuClone = $('#menu').clone().attr('id', 'navigation-mobile');

BRUSHED.mobileNav = function(){
	var windowWidth = $(window).width();
	
	// Show Menu or Hide the Menu
	if( windowWidth <= 979 ) {
		if( $('#mobile-nav').length > 0 ) {
			mobileMenuClone.insertAfter('#menu');
			$('#navigation-mobile #menu-nav').attr('id', 'menu-nav-mobile');
		}
	} else {
		$('#navigation-mobile').css('display', 'none');
		if ($('#mobile-nav').hasClass('open')) {
			$('#mobile-nav').removeClass('open');	
		}
	}
}

// Call the Event for Menu 
BRUSHED.listenerMenu = function(){
	$('#mobile-nav').on('click', function(e){
		$(this).toggleClass('open');
		
		if ($('#mobile-nav').hasClass('open')) {
			$('#navigation-mobile').slideDown(500, 'easeOutExpo');
		} else {
			$('#navigation-mobile').slideUp(500, 'easeOutExpo');
		}
		e.preventDefault();
	});
	
	$('#menu-nav-mobile a').on('click', function(){
		$('#mobile-nav').removeClass('open');
		$('#navigation-mobile').slideUp(350, 'easeOutExpo');
	});
}


/* ==================================================
   Slider Options
================================================== */

BRUSHED.slider = function(){
	$.supersized({
		// Functionality
		slideshow               :   1,			// Slideshow on/off
		autoplay				:	1,			// Slideshow starts playing automatically
		start_slide             :   1,			// Start slide (0 is random)
		stop_loop				:	0,			// Pauses slideshow on last slide
		random					: 	0,			// Randomize slide order (Ignores start slide)
		slide_interval          :   12000,		// Length between transitions
		transition              :   1, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
		transition_speed		:	300,		// Speed of transition
		new_window				:	1,			// Image links open in new window/tab
		pause_hover             :   0,			// Pause slideshow on hover
		keyboard_nav            :   1,			// Keyboard navigation on/off
		performance				:	1,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
		image_protect			:	1,			// Disables image dragging and right click with Javascript
												   
		// Size & Position						   
		min_width		        :   0,			// Min width allowed (in pixels)
		min_height		        :   0,			// Min height allowed (in pixels)
		vertical_center         :   1,			// Vertically center background
		horizontal_center       :   1,			// Horizontally center background
		fit_always				:	0,			// Image will never exceed browser width or height (Ignores min. dimensions)
		fit_portrait         	:   1,			// Portrait images will not exceed browser height
		fit_landscape			:   0,			// Landscape images will not exceed browser width
												   
		// Components							
		slide_links				:	'blank',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
		thumb_links				:	0,			// Individual thumb links for each slide
		thumbnail_navigation    :   0,			// Thumbnail navigation
		slides 					:  	[			// Slideshow Images
											{image : '_include/img/slider-images/image01.jpg', title : '<div class="slide-content">Brushed</div>', thumb : '', url : ''},
											{image : '_include/img/slider-images/image02.jpg', title : '<div class="slide-content">Brushed</div>', thumb : '', url : ''},
											{image : '_include/img/slider-images/image03.jpg', title : '<div class="slide-content">Brushed</div>', thumb : '', url : ''},
											{image : '_include/img/slider-images/image04.jpg', title : '<div class="slide-content">Brushed</div>', thumb : '', url : ''}  
									],
									
		// Theme Options			   
		progress_bar			:	0,			// Timer for each slide							
		mouse_scrub				:	0
		
	});

}


/* ==================================================
   Navigation Fix
================================================== */

BRUSHED.nav = function(){
	$('.sticky-nav').waypoint('sticky');
}


/* ==================================================
   Filter Works
================================================== */

BRUSHED.filter = function (){
	if($('#projects').length > 0){		
		var $container = $('#projects');
		
		$container.isotope({
		  // options
		  animationEngine: 'best-available',
		  itemSelector : '.item-thumbs',
		  layoutMode : 'fitRows'
		});
	
		
		// filter items when filter link is clicked
		var $optionSets = $('#options .option-set'),
			$optionLinks = $optionSets.find('a');
	
		  $optionLinks.click(function(){
			var $this = $(this);
			// don't proceed if already selected
			if ( $this.hasClass('selected') ) {
			  return false;
			}
			var $optionSet = $this.parents('.option-set');
			$optionSet.find('.selected').removeClass('selected');
			$this.addClass('selected');
	  
			// make option object dynamically, i.e. { filter: '.my-filter-class' }
			var options = {},
				key = $optionSet.attr('data-option-key'),
				value = $this.attr('data-option-value');
			// parse 'false' as false boolean
			value = value === 'false' ? false : value;
			options[ key ] = value;
			if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
			  // changes in layout modes need extra logic
			  changeLayoutMode( $this, options )
			} else {
			  // otherwise, apply new options
			  $container.isotope( options );
			}
			
			return false;
		});
	}
}


/* ==================================================
   FancyBox
================================================== */

BRUSHED.fancyBox = function(){
	if($('.fancybox').length > 0 || $('.fancybox-media').length > 0 || $('.fancybox-various').length > 0){
		
		$(".fancybox").fancybox({				
				padding : 0,
				beforeShow: function () {
					this.title = $(this.element).attr('title');
					this.title = '<h4>' + this.title + '</h4>' + '<p>' + $(this.element).parent().find('img').attr('alt') + '</p>';
				},
				helpers : {
					title : { type: 'inside' },
				}
			});
			
		$('.fancybox-media').fancybox({
			openEffect  : 'none',
			closeEffect : 'none',
			helpers : {
				media : {}
			}
		});
	}
}


/* ==================================================
   Contact Form
================================================== */

BRUSHED.contactForm = function(){
	$("#contact-submit").on('click',function() {
		$contact_form = $('#contact-form');
		
		var fields = $contact_form.serialize();
		
		$.ajax({
			type: "POST",
			url: "_include/php/contact.php",
			data: fields,
			dataType: 'json',
			success: function(response) {
				
				if(response.status){
					$('#contact-form input').val('');
					$('#contact-form textarea').val('');
				}
				
				$('#response').empty().html(response.html);
			}
		});
		return false;
	});
}


/* ==================================================
   Twitter Feed
================================================== */

BRUSHED.tweetFeed = function(){
	var valueTop = -64; // Margin Top Value
	
    $("#ticker").tweet({
          username: "Bluxart", // Change this with YOUR ID
          page: 1,
          avatar_size: 0,
          count: 10,
		  template: "{text}{time}",
		  filter: function(t){ return ! /^@\w+/.test(t.tweet_raw_text); },
          loading_text: "loading ..."
	}).bind("loaded", function() {
	  var ul = $(this).find(".tweet_list");
	  var ticker = function() {
		setTimeout(function() {
			ul.find('li:first').animate( {marginTop: valueTop + 'px'}, 500, 'linear', function() {
				$(this).detach().appendTo(ul).removeAttr('style');
			});	
		  ticker();
		}, 5000);
	  };
	  ticker();
	});
	
}


/* ==================================================
   Menu Highlight
================================================== */

BRUSHED.menu = function(){
	$('#menu-nav, #menu-nav-mobile').onePageNav({
		currentClass: 'current',
    	changeHash: false,
    	scrollSpeed: 750,
    	scrollOffset: 30,
    	scrollThreshold: 0.5,
		easing: 'easeOutExpo',
		filter: ':not(.external)'
	});
}

/* ==================================================
   Next Section
================================================== */

BRUSHED.goSection = function(){
	$('#nextsection').on('click', function(){
		$target = $($(this).attr('href')).offset().top-30;
		
		$('body, html').animate({scrollTop : $target}, 750, 'easeOutExpo');
		return false;
	});
}

/* ==================================================
   GoUp
================================================== */

BRUSHED.goUp = function(){
	$('#goUp').on('click', function(){
		$target = $($(this).attr('href')).offset().top-30;
		
		$('body, html').animate({scrollTop : $target}, 750, 'easeOutExpo');
		return false;
	});
}


/* ==================================================
	Scroll to Top
================================================== */

BRUSHED.scrollToTop = function(){
	var windowWidth = $(window).width(),
		didScroll = false;

	var $arrow = $('#back-to-top');

	$arrow.click(function(e) {
		$('body,html').animate({ scrollTop: "0" }, 750, 'easeOutExpo' );
		e.preventDefault();
	})

	$(window).scroll(function() {
		didScroll = true;
	});

	setInterval(function() {
		if( didScroll ) {
			didScroll = false;

			if( $(window).scrollTop() > 1000 ) {
				$arrow.css('display', 'block');
			} else {
				$arrow.css('display', 'none');
			}
		}
	}, 250);
}

/* ==================================================
   Thumbs / Social Effects
================================================== */

// Fix Hover on Touch Devices
BRUSHED.utils = function(){
	
	$('.item-thumbs').bind('touchstart', function(){
		$(".active").removeClass("active");
      	$(this).addClass('active');
    });
	
	$('.image-wrap').bind('touchstart', function(){
		$(".active").removeClass("active");
      	$(this).addClass('active');
    });
	
	$('#social ul li').bind('touchstart', function(){
		$(".active").removeClass("active");
      	$(this).addClass('active');
    });
	
}

/* ==================================================
   Accordion
================================================== */

BRUSHED.accordion = function(){
	var accordion_trigger = $('.accordion-heading.accordionize');
	
	accordion_trigger.delegate('.accordion-toggle','click', function(event){
		if($(this).hasClass('active')){
			$(this).removeClass('active');
		   	$(this).addClass('inactive');
		}
		else{
		  	accordion_trigger.find('.active').addClass('inactive');          
		  	accordion_trigger.find('.active').removeClass('active');   
		  	$(this).removeClass('inactive');
		  	$(this).addClass('active');
	 	}
		event.preventDefault();
	});
}

/* ==================================================
   Toggle
================================================== */

BRUSHED.toggle = function(){
	var accordion_trigger_toggle = $('.accordion-heading.togglize');
	
	accordion_trigger_toggle.delegate('.accordion-toggle','click', function(event){
		if($(this).hasClass('active')){
			$(this).removeClass('active');
		   	$(this).addClass('inactive');
		}
		else{
		  	$(this).removeClass('inactive');
		  	$(this).addClass('active');
	 	}
		event.preventDefault();
	});
}

/* ==================================================
   Tooltip
================================================== */

BRUSHED.toolTip = function(){ 
    $('a[data-toggle=tooltip]').tooltip();
}


/* ==================================================
	Init
================================================== */

BRUSHED.slider();

$(document).ready(function(){
	// Call placeholder.js to enable Placeholder Property for IE9
	Modernizr.load([
	{
		test: Modernizr.placeholder,
		nope: '_include/js/placeholder.js', 
		complete : function() {
				if (!Modernizr.placeholder) {
						Placeholders.init({
						live: true,
						hideOnFocus: false,
						className: "yourClass",
						textColor: "#999"
						});    
				}
		}
	}
	]);
	
	// Preload the page with jPreLoader
	$('body').jpreLoader({
		splashID: "#jSplash",
		showSplash: true,
		showPercentage: true,
		autoClose: true,
		splashFunction: function() {
			$('#circle').delay(250).animate({'opacity' : 1}, 500, 'linear');
		}
	});
	
	BRUSHED.nav();
	BRUSHED.mobileNav();
	BRUSHED.listenerMenu();
	BRUSHED.menu();
	BRUSHED.goSection();
	BRUSHED.goUp();
	BRUSHED.filter();
	BRUSHED.fancyBox();
	BRUSHED.contactForm();
	BRUSHED.tweetFeed();
	BRUSHED.scrollToTop();
	BRUSHED.utils();
	BRUSHED.accordion();
	BRUSHED.toggle();
	BRUSHED.toolTip();
});

$(window).resize(function(){
	BRUSHED.mobileNav();
});

});

                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                            		</div>
                                    

                                    <div id="slider-settings" class="box-post">
                                    	<!-- Top Content -->
                            			<div class="box-post-content">
                                            <div class="box-post-header">
                                            	<h3 class="c-name">Brushed - Responsive One Page Template</h3>
                                                <h4 class="credits">By Alessio Atzeni - <a href="http://www.alessioatzeni.com" target="_blank">www.alessioatzeni.com</a></h4>
                                            </div>
                                            <div class="box-post-container">
                                            	<h3 class="c-title">Slider Settings</h3>
                                                <div class="c-text">
													<p>We see the main settings of the slider and how it works.</p>
                                                    <p>For more information I advise you to view the documentation on <a href="http://buildinternet.com/project/supersized/" target="_blank">Supersized Plugin</a>.</p>
                                                    
                                                    <h3 class="c-title">HTML Syntax</h3>
                                                    <p>This is the html syntax of the slide.</p>
                                                    <ul>
                                                    	<li>The class <strong>"overlay"</strong> is a simple mask in css you can delete it if you want.</li>
                                                        <li>The class <strong>"slider-text"</strong> is used to enter text, the text will be inserted later in the file <strong>main.js</strong>.</li>
                                                        <li>The class <strong>"control-nav"</strong> is used for the control navigation arrow.</li>
                                                        <li>The ID <strong>"slide-list"</strong> is used for the bullet navigation.</li>
                                                        <li>The ID <strong>"next-section"</strong> is used to achieve the favorite section with a scroll effect.</li>
                                                    </ul>
                                                    
                                                    <pre class="brush: html; syntaxhighlighter">
                                                    <!-- Head Section / index.html / Line 93 -->
                                                    
                                                    <!-- Homepage Slider -->
                                                    <div id="home-slider">	
                                                        <div class="overlay"></div>
                                                    
                                                        <div class="slider-text">
                                                            <div id="slidecaption"></div>
                                                        </div>   
                                                        
                                                        <div class="control-nav">
                                                            <a id="prevslide" class="load-item"><i class="font-icon-arrow-simple-left"></i></a>
                                                            <a id="nextslide" class="load-item"><i class="font-icon-arrow-simple-right"></i></a>
                                                            <ul id="slide-list"></ul>
                                                            
                                                            <a id="nextsection" href="#work"><i class="font-icon-arrow-simple-down"></i></a>
                                                        </div>
                                                    </div>
                                                    <!-- End Homepage Slider -->
                                                    </pre>
                                                    
                                                    <h3 class="c-title">CSS</h3>
                                                    <p>These are the CSS properties of the slider.</p>
                                                    
                                                    <pre class="brush: css; syntaxhighlighter">
                                                    /* ==================================================
                                                       Home Slider
                                                    ================================================== */
                                                    
                                                    #home-slider {
                                                        position: relative;
                                                        overflow: hidden;
                                                        height: 100%;
                                                    }
                                                    
                                                    #home-slider .overlay { 
                                                        position: absolute;
                                                        width: 100%;
                                                        height: 100%;
                                                        background: #26292E;
                                                        opacity: 0.7;
                                                        filter: alpha(opacity=70);
                                                        z-index: 0;
                                                    }
                                                    
                                                    #home-slider .slider-text {
                                                        position: absolute;
                                                        left: 50%;
                                                        top: 50%;
                                                        margin: -150px 0 0 -585px;
                                                        width: 1170px;
                                                        height: 250px;
                                                        text-align: center;
                                                        z-index: 2;	
                                                    }
                                                    
                                                    #home-slider #slidecaption {
                                                        width: 100%;
                                                        line-height: 250px;
                                                        margin: 0;
                                                        text-align: center;
                                                        text-shadow: none;	
                                                    }
                                                    
                                                    #home-slider .slide-content {
                                                        font-size: 60px;
                                                        color: #FFFFFF;
                                                        letter-spacing: -3px;
                                                        text-transform: uppercase;	
                                                    }
                                                    
                                                    #home-slider .control-nav {
                                                        position: absolute;
                                                        width: 100%;
                                                        background: #2F3238;
                                                        height: 50px;
                                                        bottom: 0;
                                                        z-index: 2;
                                                    }
                                                    
                                                    #home-slider #nextslide,
                                                    #home-slider #prevslide {
                                                        background-image: none;
                                                        background-color: #26292E;
                                                        display: inline-block;
                                                        margin: 0;
                                                        position: relative;
                                                        top: 0;
                                                        left: 0;
                                                        right: 0;
                                                        width: 50px;
                                                        height: 50px;
                                                        opacity: 1;
                                                        filter: alpha(opacity=100);
                                                        
                                                        -webkit-transition: background 0.1s linear 0s;	
                                                           -moz-transition: background 0.1s linear 0s;
                                                             -o-transition: background 0.1s linear 0s;
                                                                transition: background 0.1s linear 0s;
                                                    }
                                                    
                                                    #home-slider #nextslide {
                                                        margin-left: -3px;	
                                                    }
                                                    
                                                    #home-slider #nextsection {
                                                        float:right;
                                                    }
                                                    
                                                    #home-slider #nextslide:hover,
                                                    #home-slider #prevslide:hover {
                                                        background-color:#DE5E60;
                                                    }
                                                    
                                                    #home-slider #nextslide i,
                                                    #home-slider #prevslide i {
                                                        font-size: 16px;
                                                        color: #FFFFFF;
                                                        position: absolute;
                                                        left: 50%;
                                                        top: 50%;
                                                        margin-top: -7px;
                                                        line-height: 1em;
                                                    }
                                                    
                                                    #home-slider #nextslide i {
                                                        margin-left: -8px;	
                                                    }
                                                    
                                                    #home-slider #prevslide i {
                                                        margin-left: -9px;	
                                                    }
                                                    
                                                    #home-slider ul#slide-list {
                                                        top: 50%;
                                                        padding: 0;
                                                        margin:-6px 0 0 0;	
                                                    }
                                                    
                                                    #home-slider ul#slide-list li {
                                                        margin-right: 12px;
                                                    }
                                                    
                                                    #home-slider ul#slide-list li:last-child {
                                                        margin-right: 0;	
                                                    }
                                                    
                                                    #home-slider ul#slide-list li a {
                                                        background-color: #6E7074;
                                                        background-image: none;
                                                        width: 12px;
                                                        height: 12px;
                                                        
                                                        -webkit-border-radius: 999px;
                                                        -moz-border-radius: 999px;
                                                        border-radius: 999px;	
                                                        
                                                        -webkit-transition: background 0.1s linear 0s;	
                                                           -moz-transition: background 0.1s linear 0s;
                                                             -o-transition: background 0.1s linear 0s;
                                                                transition: background 0.1s linear 0s;
                                                    }
                                                    
                                                    #home-slider ul#slide-list li a:hover {
                                                        background-color: #FFFFFF;	
                                                    }
                                                    
                                                    #home-slider ul#slide-list li.current-slide a,
                                                    #home-slider ul#slide-list li.current-slide a:hover {
                                                        background-color:#DE5E60;
                                                    }
                                                    
                                                    #home-slider #nextsection {
                                                        background-color: #26292E;
                                                        margin: 0;
                                                        position: relative;
                                                        float:right;
                                                        width: 50px;
                                                        height: 50px;
                                                        
                                                        -webkit-transition: background 0.1s linear 0s;	
                                                           -moz-transition: background 0.1s linear 0s;
                                                             -o-transition: background 0.1s linear 0s;
                                                                transition: background 0.1s linear 0s;
                                                    }
                                                    
                                                    #home-slider #nextsection:hover {
                                                        background-color:#DE5E60;
                                                    }
                                                    
                                                    #home-slider #nextsection i {
                                                        font-size: 16px;
                                                        color: #FFFFFF;
                                                        position: absolute;
                                                        left: 50%;
                                                        top: 50%;
                                                        margin-top: -7px;
                                                        line-height: 1em;
                                                    }
                                                    
                                                    #home-slider #nextsection i {
                                                        margin-left: -7px;	
                                                    }
                                                    </pre>
                                                    
                                                    <h3 class="c-title">JS</h3>
                                                    <p>This is the portion of the js script that affects the slider, as you can see you can change the default parameters of the slider.
                                                    Enter the path for images, insert text, a thumb (assuming you want a slider with the thumb clickable) and a URL for a possible link.
                                                    This does not include any slider thumb or link, then you should see the <a href="http://buildinternet.com/project/supersized/" target="_blank">plugin documentation</a> in the case and act on the CSS.</p>
                                                    
                                                    <pre class="brush: html; syntaxhighlighter">
                                                    /* ==================================================
                                                       Slider Options
                                                    ================================================== */
                                                    
                                                    BRUSHED.slider = function(){
                                                        $.supersized({
                                                            // Functionality
                                                            slideshow               :   1,			// Slideshow on/off
                                                            autoplay				:	1,			// Slideshow starts playing automatically
                                                            start_slide             :   1,			// Start slide (0 is random)
                                                            stop_loop				:	0,			// Pauses slideshow on last slide
                                                            random					: 	0,			// Randomize slide order (Ignores start slide)
                                                            slide_interval          :   12000,		// Length between transitions
                                                            transition              :   1, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                                                            transition_speed		:	300,		// Speed of transition
                                                            new_window				:	1,			// Image links open in new window/tab
                                                            pause_hover             :   0,			// Pause slideshow on hover
                                                            keyboard_nav            :   1,			// Keyboard navigation on/off
                                                            performance				:	1,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                                                            image_protect			:	1,			// Disables image dragging and right click with Javascript
                                                                                                       
                                                            // Size & Position						   
                                                            min_width		        :   0,			// Min width allowed (in pixels)
                                                            min_height		        :   0,			// Min height allowed (in pixels)
                                                            vertical_center         :   1,			// Vertically center background
                                                            horizontal_center       :   1,			// Horizontally center background
                                                            fit_always				:	0,			// Image will never exceed browser width or height (Ignores min. dimensions)
                                                            fit_portrait         	:   1,			// Portrait images will not exceed browser height
                                                            fit_landscape			:   0,			// Landscape images will not exceed browser width
                                                                                                       
                                                            // Components							
                                                            slide_links				:	'blank',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
                                                            thumb_links				:	0,			// Individual thumb links for each slide
                                                            thumbnail_navigation    :   0,			// Thumbnail navigation
                                                            slides 					:  	[			// Slideshow Images
                                                                                                {image : '_include/img/slider-images/image01.jpg', title : '<div class="slide-content">Brushed</div>', thumb : '', url : ''},
                                                                                                {image : '_include/img/slider-images/image02.jpg', title : '<div class="slide-content">Brushed</div>', thumb : '', url : ''},
                                                                                                {image : '_include/img/slider-images/image03.jpg', title : '<div class="slide-content">Brushed</div>', thumb : '', url : ''},
                                                                                                {image : '_include/img/slider-images/image04.jpg', title : '<div class="slide-content">Brushed</div>', thumb : '', url : ''}  
                                                                                        ],
                                                                                        
                                                            // Theme Options			   
                                                            progress_bar			:	0,			// Timer for each slide							
                                                            mouse_scrub				:	0
                                                            
                                                        });
                                                    
                                                    }
                                                    </pre>
                                                    
                                                </div>
                                            </div>
                                        </div>
                            		</div>

                                    
                                    <div id="portfolio-settings" class="box-post">
                                    	<!-- Top Content -->
                            			<div class="box-post-content">
                                            <div class="box-post-header">
                                            	<h3 class="c-name">Brushed - Responsive One Page Template</h3>
                                                <h4 class="credits">By Alessio Atzeni - <a href="http://www.alessioatzeni.com" target="_blank">www.alessioatzeni.com</a></h4>
                                            </div>
                                            <div class="box-post-container">
                                            	<h3 class="c-title">Portfolio Settings</h3>
                                                <div class="c-text">
													<p>The portfolio section is composed of a Isotope Plugin for the filer and FancyBox Plugin for the Image and Media.</p>
                                                    <p>For complete documentation about this plugins I recommend you take a look at their official documentation.</p>
                                                    
                                                    <p><a href="http://isotope.metafizzy.co/" target="_blank">Isotope Documentation</a> and <a href="http://fancyapps.com/fancybox/" target="_blank">FancyBox Documentation.</a></p>
                                                    
                                                    <h3 class="c-title">Filter Options</h3>
                                                    <p>This is the general syntax, you can add or remove options. Always remember to give a unique value for each option available.</p>
                                                    
                                                    <pre class="brush: html; syntaxhighlighter">
                                                    <!-- Filter -->
                                                    <nav id="options" class="work-nav">
                                                        <ul id="filters" class="option-set" data-option-key="filter">
                                                            <li class="type-work">Type of Work</li>
                                                            <li><a href="#filter" data-option-value="*" class="selected">All Projects</a></li>
                                                            <li><a href="#filter" data-option-value=".design">Design</a></li>
                                                            <li><a href="#filter" data-option-value=".photography">Photography</a></li>
                                                            <li><a href="#filter" data-option-value=".video">Video</a></li>
                                                        </ul>
                                                    </nav>
                                                    <!-- End Filter -->
                                                    </pre>
                                                    
                                                    <h3 class="c-title">Work Thumbs</h3>
                                                    <p>This is the syntax for the proper functioning of the portfolio.</p>
                                                    
                                                    <p>This is the basic structure of the portfolio.</p>
                                                    <ul>
                                                    	<li>First you need to assign <strong>"item-thumbs"</strong> the class that will be used for the filter in this case I assigned <strong>"design"</strong>.</li>
                                                        <li>Assign to <strong>a tag</strong> the class <strong>fancybox</strong> for image or <strong>fancybox-media</strong> for your media (video, iframe, etc.).</li>
                                                        <li>You can add <strong>data-fancybox-group="your_name"</strong> to <strong>a tag</strong> if you want a gallery of images or videos.</li>
                                                        <li>You can add a <strong>Title</strong> and <strong>Description</strong> to your media.</li>
                                                    </ul>
                                                  
                                                    <pre class="brush: html; syntaxhighlighter">
                                                    <section id="projects">
                                                        <ul id="thumbs">
                                                        
                                                            <!-- Item Project and Filter Name -->
                                                            <li class="item-thumbs span3 design">
                                                            	<!-- Fancybox - Gallery Enabled - Title - Full Image -->
                                                                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg">
                                                                    <span class="overlay-img"></span>
                                                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                                                </a>
                                                                <!-- Thumb Image and Description -->
                                                                <img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                                                            </li>
                                                            <!-- End Item Project -->
                                                            
                                                            <!-- Item Project and Filter Name -->
                                                            <li class="item-thumbs span3 design">
                                                            	<!-- Fancybox - Gallery Enabled - Title - Full Image -->
                                                                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Office" href="_include/img/work/full/image-02-full.jpg">
                                                                    <span class="overlay-img"></span>
                                                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                                                </a>
                                                                <!-- Thumb Image and Description -->
                                                                <img src="_include/img/work/thumbs/image-02.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                                                            </li>
                                                            <!-- End Item Project -->
                                                            
                                                            [...]
                                                            
                                                            <!-- Item Project and Filter Name -->
                                                            <li class="item-thumbs span3 video">
                                                                <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                                                                <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/50834315">
                                                                    <span class="overlay-img"></span>
                                                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                                                </a>
                                                                <!-- Thumb Image and Description -->
                                                                <img src="_include/img/work/thumbs/image-09.jpg" alt="Video">
                                                            </li>
                                                            <!-- End Item Project -->
                                                            
                                                            <!-- Item Project and Filter Name -->
                                                            <li class="item-thumbs span3 video">
                                                                <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                                                                <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/51460511">
                                                                    <span class="overlay-img"></span>
                                                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                                                </a>
                                                                <!-- Thumb Image and Description -->
                                                                <img src="_include/img/work/thumbs/image-08.jpg" alt="Video">
                                                            </li>
                                                            <!-- End Item Project -->
                                                            
                                                       </ul>
                                                    </section>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                            		</div>
                                    
                                    
                                    
                                    <div id="contact-form" class="box-post">
                                    	<!-- Top Content -->
                            			<div class="box-post-content">
                                            <div class="box-post-header">
                                            	<h3 class="c-name">Brushed - Responsive One Page Template</h3>
                                                <h4 class="credits">By Alessio Atzeni - <a href="http://www.alessioatzeni.com" target="_blank">www.alessioatzeni.com</a></h4>
                                            </div>
                                            <div class="box-post-container">
                                            	<h3 class="c-title">Contact Form</h3>
                                                <div class="c-text">
													<p>This is a PHP Script for sending messages to your email, you should edit email default to your email to start receive messages.</p>
                                                    <pre class="brush: js; syntaxhighlighter">
                                                    // Go To File ( _include/php/contact.php ) in main folder and change email :
                                                    // Customize this parameters
                                                    
                                                    $admin_email = 'youremail@yourdomain.com'; 	// Your Email
													$message_min_length = 5; 					// Min Message Length
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                            		</div>
                                    
                                    
                                   <div id="shortcodes" class="box-post">
                                    <!-- Top Content -->
                                    <div class="box-post-content">
                                        <div class="box-post-header">
                                            <h3 class="c-name">Brushed - Responsive One Page Template</h3>
                                            <h4 class="credits">By Alessio Atzeni - <a href="http://www.alessioatzeni.com" target="_blank">www.alessioatzeni.com</a></h4>
                                        </div>
                                        
                                        <div class="box-post-container">
                                            <h3 class="c-title">Shortcodes</h3>
                                            <div class="c-text">
                                                <p>This is a list of the shortcodes on this template. All these shortcodes are based on <a href="http://twitter.github.io/bootstrap/components.html" target="_blank">Bootstrap Framework</a>.</p>
                                                <p>You can modify these elements in the <strong>shortcodes.css</strong> file.</p>
                                            </div>
                                            
                                            <h3 class="c-title">Accordion</h3>
                                            <pre class="brush: html; syntaxhighlighter">
                                            <!-- Start Accordion -->
                                            <div class="accordion" id="accordionArea">
                                                <div class="accordion-group">
                                                    <div class="accordion-heading accordionize">
                                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#oneArea">
                                                            Design
                                                            <span class="font-icon-arrow-simple-down"></span>
                                                        </a>
                                                    </div>
                                                    <div id="oneArea" class="accordion-body collapse">
                                                        <div class="accordion-inner">
                                                            Content...
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="accordion-group">
                                                    <div class="accordion-heading accordionize">
                                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#twoArea">
                                                        Development
                                                        <span class="font-icon-arrow-simple-down"></span>
                                                    </a>
                                                    </div>
                                                    <div id="twoArea" class="accordion-body collapse">
                                                        <div class="accordion-inner">
                                                            Content...
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="accordion-group">
                                                    <div class="accordion-heading accordionize">
                                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#threeArea">
                                                        UX/UI
                                                        <span class="font-icon-arrow-simple-down"></span>
                                                    </a>
                                                    </div>
                                                    <div id="threeArea" class="accordion-body collapse">
                                                        <div class="accordion-inner">
                                                            Content...
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- End Accordion -->
                                            </pre>
                                            
                                            <h3 class="c-title">Toggle</h3>
                                            <pre class="brush: html; syntaxhighlighter">
                                            <!-- Start Toggle -->
                                            <div class="accordion" id="toggleArea">
                                            
                                                <div class="accordion-group">
                                                    <div class="accordion-heading togglize">
                                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#" href="#collapseOne">
                                                            Responsive
                                                            <span class="font-icon-plus"></span>
                                                            <span class="font-icon-minus"></span>
                                                        </a>
                                                    </div>
                                                    <div id="collapseOne" class="accordion-body collapse">
                                                        <div class="accordion-inner">
                                                            Content...
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="accordion-group">
                                                    <div class="accordion-heading togglize">
                                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#" href="#collapseTwo">
                                                        Logo Design
                                                        <span class="font-icon-plus"></span>
                                                        <span class="font-icon-minus"></span>
                                                    </a>
                                                    </div>
                                                    <div id="collapseTwo" class="accordion-body collapse">
                                                        <div class="accordion-inner">
                                                            Content...
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="accordion-group">
                                                    <div class="accordion-heading togglize">
                                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#" href="#collapseThird">
                                                        Branding
                                                        <span class="font-icon-plus"></span>
                                                        <span class="font-icon-minus"></span>
                                                    </a>
                                                    </div>
                                                    <div id="collapseThird" class="accordion-body collapse">
                                                        <div class="accordion-inner">
                                                            Content...
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                            </div>
                                            <!-- End Toggle -->
                                            </pre>
                                            
                                            <h3 class="c-title">Alerts</h3>
                                            <pre class="brush: html; syntaxhighlighter">
                                            <div class="alert alert-standard fade in">
                                                <a class="close" data-dismiss="alert" href="#">&times;</a>
                                                <strong>Oh snap!</strong> Change a few things up and try submitting again. 
                                            </div>
                                            
                                            <div class="alert fade in">
                                                <a class="close" data-dismiss="alert" href="#">&times;</a>
                                                <strong>Warning!</strong> Best check yo self, you're not looking too good.
                                            </div>
                                            
                                            <div class="alert alert-error fade in">
                                                <a class="close" data-dismiss="alert" href="#">&times;</a>
                                                <strong>Oh snap!</strong> Change a few things up and try submitting again. 
                                            </div>
                                    
                                            <div class="alert alert-info fade in">
                                                <a class="close" data-dismiss="alert" href="#">&times;</a>
                                                <strong>Heads up!</strong> This alert needs your attention, but it's not super important. 
                                            </div>
                                            
                                            <div class="alert alert-success fade in">
                                                <a class="close" data-dismiss="alert" href="#">&times;</a>
                                                <strong>Well done!</strong> You successfully read this important alert message. 
                                            </div>
                                    
                                            <div class="alert alert-block alert-danger fade in">
                                                <a class="close" data-dismiss="alert" href="#">&times;</a>
                                                <h4>Warning!</h4>
                                                Best check yo self, you're not...
                                            </div>
                                            </pre>
                                            
                                            <h3 class="c-title">Tabs</h3>
                                            <pre class="brush: html; syntaxhighlighter">
                                            <div class="tabbable">
                                                <ul class="nav nav-tabs" id="myTab">
                                                    <li class="active"><a href="#tab1" data-toggle="tab">Tab</a></li>
                                                    <li><a href="#tab2" data-toggle="tab">Tab</a></li>
                                                    <li><a href="#tab3" data-toggle="tab">Tab</a></li>
                                                </ul>
                                             
                                                <div class="tab-content">
                                                    <div class="tab-pane fade in active" id="tab1">
                                                       Content...    
                                                    </div>
                                                    
                                                    <div class="tab-pane fade in" id="tab2">
                                                       Content...
                                                    </div>
                                                    
                                                    <div class="tab-pane fade in" id="tab3">
                                                        Content... 
                                                    </div>
                                                </div>
                                            </div>
                                            </pre>
                                            
                                            <h3 class="c-title">BlockQuote</h3>
                                            <pre class="brush: html; syntaxhighlighter">
                                            <blockquote>
                                                <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                                <small>
                                                    <cite title="John Bostic">John Bostic</cite>
                                                </small>
                                            </blockquote>
                                            </pre>
                                            
                                            <h3 class="c-title">Tooltip</h3>
                                            <pre class="brush: html; syntaxhighlighter">
                                            <p>Maecenas neque diam, <a href="#" data-toggle="tooltip" title="I'm a Simple Tootlip">auctor ut tellus</a>. Etiam enim lacus sem.</p>
                                            </pre>
                                            
                                            <h3 class="c-title">Information Block</h3>
                                            <pre class="brush: html; syntaxhighlighter">
                                            <div class="info-block">
                                                <div class="info-text">
                                                    <h3><span class="color-text">NEW</span> Brushed- Responsive One Page Template</h3>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam.</p>
                                                    <a class="button" target="_blank" href="">Purchase</a> 
                                                </div>
                                            </div>
                                            </pre>
                                            
                                            <h3 class="c-title">Responsive Video</h3>
                                            <pre class="brush: html; syntaxhighlighter">
                                            <div class="video-container">
                                                <iframe src="http://player.vimeo.com/video/50834315?byline=0&amp;portrait=0&amp;badge=0&amp;color=DE5E60" frameborder="0"></iframe>
                                            </div>
                                            </pre>
                                            
                                            <h3 class="c-title">Buttons</h3>
                                            <pre class="brush: html; syntaxhighlighter">
                                            <a class="button button-mini" href="#">Mini</a>
                                            <a class="button button-small" href="#">Small</a>
                                            <a class="button" href="#">Medium</a>
                                            <a class="button button-large" href="#">Large</a>
                                            </pre>
                                            
                                            <h3 class="c-title">Icons</h3>
                                            <p>You can see the complete list of all the icons (242 Icons) and their specific class inside the <strong>"Source Files"</strong> folder.</p>
                                            <pre class="brush: html; syntaxhighlighter">
                                            <span class="font-icon-adjust"></span>
                                            </pre>
                                    </div>
                                    </div>        
                                    </div>
                                    	
                                    
                                    
                                    
                                   <div id="scripts" class="box-post">
                                    	<!-- Top Content -->
                            			<div class="box-post-content">
                                            <div class="box-post-header">
                                            	<h3 class="c-name">Brushed - Responsive One Page Template</h3>
                                                <h4 class="credits">By Alessio Atzeni - <a href="http://www.alessioatzeni.com" target="_blank">www.alessioatzeni.com</a></h4>
                                            </div>
                                            <div class="box-post-container">
                                            	<h3 class="c-title">Scripts</h3>
                                                <div class="c-text">
                                                <p>These are the scripts used in the template with their related link for documentation.</p>
													<ul>
                                                    	<li><a href="http://jquery.com/" target="_blank">jQuery</a></li>
                                                        <li><a href="http://modernizr.com/" target="_blank">Modernizr</a></li>
                                                        <li><a href="http://twitter.github.io/bootstrap/index.html" target="_blank">Bootstrap Framework</a></li>
                                                        <li><a href="http://buildinternet.com/project/supersized/" target="_blank">SuperSized</a></li>
                                                        <li><a href="http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/" target="_blank">jPreloader</a></li>
                                                        <li><a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jQuery Easing</a></li>
                                                        <li><a href="http://flesler.blogspot.com" target="_blank">jQuery Scroll To</a></li>
                                                        <li><a href="http://github.com/davist11/jQuery-One-Page-Nav" target="_blank">jQuery One Page Navi</a></li>
                                                        <li><a href="http://fancyapps.com/fancybox/" target="_blank">FancyBox</a></li>
                                                        <li><a href="https://github.com/seaofclouds/tweet" target="_blank">Tweet</a></li>
                                                        <li><a href="http://isotope.metafizzy.co/" target="_blank">Isotope Filter</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                            		</div>
                                    
                                    
                                    <div id="final-words" class="box-post">
                                    	<!-- Top Content -->
                            			<div class="box-post-content">
                                            <div class="box-post-header">
                                            	<h3 class="c-name">Brushed - Responsive One Page Template</h3>
                                                <h4 class="credits">By Alessio Atzeni - <a href="http://www.alessioatzeni.com" target="_blank">www.alessioatzeni.com</a></h4>
                                            </div>
                                            <div class="box-post-container">
                                            	<h3 class="c-title">Scripts</h3>
                                                <div class="c-text">
                                                <p><strong>Again, thank you for purchasing this Template!</strong></p>
                                                <p>If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated <a href="http://themeforest.net/user/Bluxart" target="_blank">support section</a>.</p>
                                                <p>If you are interested you can follow me on:</p>
													<ul>
                                                    	<li><a href="https://twitter.com/Bluxart" title="Follow Me on Twitter" target="_blank">Twitter</a></li>
                                                        <li><a href="http://dribbble.com/Bluxart" title="Follow Me on Dribbble" target="_blank">Dribbble</a></li>
                                                        <li><a href="http://forrst.com/people/Bluxart" title="Follow Me on Forrst" target="_blank">Forrst</a></li>
                                                        <li><a href="http://www.behance.net/alessioatzeni" title="Follow Me on Behance" target="_blank">Behance</a></li>
                                                        <li><a href="https://www.facebook.com/Bluxart" title="Follow Me on Facebook" target="_blank">Facebook</a></li>
                                                        <li><a href="https://plus.google.com/105500420878314068694" title="Follow Me on Google Plus" target="_blank">Google Plus</a></li>
                                                        <li><a href="http://www.linkedin.com/in/alessioatzeni" title="Follow Me on LinkedIn" target="_blank">Linked In</a></li>
                                                        <li><a href="http://themeforest.net/user/Bluxart" title="Follow Me on ThemeForest" target="_blank">ThemeForest</a></li>
                                                        <li><a href="http://zerply.com/Bluxart/public" title="Follow Me on Zerply" target="_blank">Zerply</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                            		</div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>

<!-- Load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="res/js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="res/js/jquery.mousewheel.min.js"></script>
<script src="res/js/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="res/js/syntax-highlighter/scripts/shCore.js"></script> 
<script type="text/javascript" src="res/js/syntax-highlighter/scripts/shBrushXml.js"></script> 
<script type="text/javascript" src="res/js/syntax-highlighter/scripts/shBrushCss.js"></script> 
<script type="text/javascript" src="res/js/syntax-highlighter/scripts/shBrushJScript.js"></script> 
<script type="text/javascript" src="res/js/syntax-highlighter/scripts/shBrushPhp.js"></script> 
<script src="res/js/ss.js"></script>
</body>
</html>
